<script setup>
import { reactive, ref } from 'vue'
import {registerUser,login} from '@/api/user.js'
import { useRouter} from 'vue-router'
import { Snackbar } from '@varlet/ui'

const isLogin = ref(true);
const loginForm = ref(null)
const loginFormData = reactive({
    account: '',
    password: '',
})
const registerForm = ref(null)
const registerFormData = reactive({
    name: '',
    account: '',
    password: '',
})
const router = useRouter()

const hanLogin = async() =>{
    const flag = await loginForm.value.validate();
    if(flag){
        console.log('登录成功',loginFormData)
        Snackbar("登录成功")
        router.push('/playGround')
    }
}
const hanRegister = async() =>{
    const flag = await registerForm.value.validate();
    if(flag){
        console.log('登录成功')
       await registerUser(registerFormData)
    }
}

</script>

<template>
    <div class="box" v-if="isLogin">
        <div class="top">
            <div>Hello!</div>
            <div>
                欢迎登录诈金花
            </div>
        </div>
        <var-form class="middle" ref="loginForm" scroll-to-error="start">
            <var-space direction="column" :size="[14, 0]">
                <var-input placeholder="请输入账号" :rules="[v => !!v || '账号不能为空']" v-model="loginFormData.account" />
                <var-input placeholder="请输入密码" type="password" :rules="[v => !!v || '密码不能为空']" v-model="loginFormData.password" />
            </var-space>
        </var-form>
        <div class="bottom">
            <var-button block color='rgba(59, 166, 98, 1)' text-color="#fff" size="large" @click="hanLogin">登录</var-button>
            <div class="extra">
                <span>没有账号？</span>
                <span class="a-btn" @click="isLogin = false">去注册</span>
            </div>
        </div>
    </div>
    <div class="box" v-else>
        <div class="top">
            <div>Hello!</div>
            <div>
                欢迎注册诈金花
            </div>
        </div>
        <var-form class="middle" ref="registerForm" scroll-to-error="start">
            <var-space direction="column" :size="[14, 0]">
                <var-input placeholder="请输入姓名" :rules="[v => !!v || '姓名不能为空']" v-model="registerFormData.name" />
                <var-input placeholder="请输入账号" :rules="[v => !!v || '账号不能为空']" v-model="registerFormData.account" />
                <var-input placeholder="请输入密码" type="password" :rules="[v => !!v || '密码不能为空']" v-model="registerFormData.password" />
            </var-space>
        </var-form>
        <div class="bottom">
            <var-button block color='rgba(59, 166, 98, 1)' text-color="#fff" size="large" @click="hanRegister">注册</var-button>
            <div class="extra">
                <span>已有账号？</span>
                <span class="a-btn" @click="isLogin = true">去登录</span>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
// .box {
//     position: relative;
//     padding: 82px 32px;
//     height: 100%;
//     display: flex;
//     flex-direction: column;
//     overflow-y: auto;

//     &::after {
//         position: absolute;
//         top: 0;
//         left: 0;
//         content: "";
//         width: 100%;
//         height: 100%;
//         z-index: -1;
//         background: linear-gradient(130.36deg, rgba(255, 250, 235, 1) 0%, rgba(227, 255, 224, 1) 100%);
//     }

//     .top {
//         /** 文本1 */
//         font-size: 40px;
//         font-weight: 700;
//         letter-spacing: 0px;
//         color: rgba(56, 56, 56, 1);
//     }

//     .middle {
//         margin-top: 62px;
//     }

//     .bottom {
//         margin-top: 54px;
//         flex: 1;

//         .extra {
//             margin-top: 20px;
//             font-size: 30px;
//             display: flex;
//             justify-content: end;

//             .a-btn {
//                 color: rgba(59, 166, 98, 1)
//             }
//         }
//     }
// }

.box {
    position: relative;
    padding: 42px 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;

    &::after {
        position: absolute;
        top: 0;
        left: 0;
        content: "";
        width: 100%;
        height: 100%;
        z-index: -1;
        background: linear-gradient(130.36deg, rgba(255, 250, 235, 1) 0%, rgba(227, 255, 224, 1) 100%);
    }

    .top {
        /** 文本1 */
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 0px;
        color: rgba(56, 56, 56, 1);
    }

    .middle {
        margin-top: 20px;
    }

    .bottom {
        margin-top: 24px;
        flex: 1;
        .extra {
            margin-top: 20px;
            font-size: 20px;
            display: flex;
            justify-content: end;

            .a-btn {
                color: rgba(59, 166, 98, 1);
                cursor: pointer;
            }
        }
    }
}
</style>
